<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            margin: 10px;
            float: left;
        }
        .box1{
            width: 0px;
            height: 0px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
        }
        .box2{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid orange;
        }
        .box3{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 100px solid blue;
        }
        .box4{
            width: 0;
            height: 0;
            border-left: 100px solid purple;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .box5{
            width: 0;
            height: 0;
            border-top: 100px solid #0094ff;
            border-right: 100px solid transparent;
        }
        .box6{
            width: 0;
            height: 0;
            border-bottom: 100px solid #f60;
            border-left: 100px solid transparent;
        }
        .box7{
            width: 0;
            height: 0;
            border-top: 100px solid aqua;
            border-left: 100px solid transparent;
        }
        .box8{
            width: 0;
            height: 0;
            border-bottom: 100px solid gold;
            border-right: 100px solid transparent;
        }
        .box9{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(27, 43, 192);
        }
        .box10{
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
            background-color: rgb(190, 37, 37);
        }
        .box11{
            width: 50px;
            height: 50px;
            background-color: rgb(226, 109, 54);
            border-left: 30px solid  red;
            border-right: 30px solid  blue;
            border-top: 30px solid  yellow;
            border-bottom: 30px solid  purple;
        }
    </style>

</head>
<body>
    
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
    <div class="box9"></div>
    <div class="box10"></div>
    <div class="box11"></div>


</body>
</html>